<template>
  <!-- 外层容器，添加页面边距和阴影效果 -->
  <div class="page-container">
    <el-container>
      <!-- 左侧菜单区域 -->
      <el-aside width="140px" class="light-sidebar">
        <!-- 不可点击的菜单标题 -->

        <!-- 菜单分隔线 -->

        <!-- 带滚动区域的菜单 -->
        <el-scrollbar class="hidden-scrollbar">
          <el-menu
            router
            :default-active="$route.path"
            background-color="#ffffff"
            active-text-color="#409EFF"
            text-color="#333"
          >
            <div class="menu-title">权限管理</div>
            <el-menu-item index="/RBAC/RBACManage/User">
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/RBAC/RBACManage/RoleView">
              <span>角色管理</span>
            </el-menu-item>
            <el-menu-item index="/RBAC/RBACManage/Permissions">
              <span>权限管理</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 导入图标组件
import {
  MagicStick,
  DataLine,
  Monitor,
  Connection,
  Opportunity,
  Promotion,
  BrushFilled,
  DataAnalysis,
  ChatDotRound,
  Setting,
  Money,
} from "@element-plus/icons-vue";

// 菜单折叠状态
const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
/* 页面外层容器样式 */
.page-container {
  height: 100vh; /* 改为完整视口高度 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 关键设置：禁止容器溢出 */

  /* 容器布局 */
  .el-container {
    height: 100vh; /* 继承外层高度 */

    /* 左侧菜单样式 */
    .light-sidebar {
      height: 100vh; /* 满高度 */
      overflow: hidden; /* 禁止菜单区域滚动 */
      background: #fff; /* 浅色背景 */
      transition: width 0.3s;

      /* 菜单标题样式 */
      .menu-title {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #333; /* 黑色字体 */
        user-select: none; /* 禁止文字选择 */
      }

      /* 分隔线样式 */
      .el-divider {
        margin: 8px 0;
        background-color: #ebeef5;
      }
    }

    /* 隐藏滚动条 */
    .hidden-scrollbar {
      height: calc(100vh - 20px); /* 留出安全边距 */

      /* 滚动区域设置 */
      :deep(.el-scrollbar__view) {
        height: 100%;
      }
      :deep(.el-scrollbar__bar) {
        display: none; /* 隐藏滚动条 */
      }
      .el-scrollbar__wrap {
        overflow-x: hidden; /* 隐藏横向滚动 */
      }
    }

    /* 菜单项样式 */
    .el-menu {
      border-right: none;

      /* 菜单项通用样式 */
      .el-menu-item {
        height: 48px;
        line-height: 48px;
        margin: 2px 8px;
        border-radius: 4px;
        transition: all 0.3s;

        /* 鼠标悬停效果 */
        &:hover {
          background-color: #f5f7fa !important;
        }

        /* 激活状态样式 */
        &.is-active {
          background-color: #ecf5ff !important;
          position: relative;

          /* 激活指示条 */
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60%;
            width: 3px;
            background: #409eff;
          }
        }

        /* 图标样式 */
        .el-icon {
          margin-right: 12px;
          font-size: 18px;
        }
      }
    }

    /* 右侧内容区域 */
    .el-main {
      height: 100vh;
      padding: 20px;
      background-color: #f5f7fa;
      overflow: hidden; /* 禁止内容区域滚动 */
      /* 路由视图容器 */
      & > div {
        height: 100%;
        overflow: auto; /* 仅内容区域可滚动 */
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
/* 全局隐藏滚动条补充 */
html {
  overflow: hidden !important;
}
</style>